<template>
  <div>
    <!--    <img src="../../../../assets/index_images/banner1.jpg" alt="">-->
    <el-carousel indicator-position="none"
        :interval="4000" type="card" height="300px" style="width: 120em;margin: 0 auto">
      <el-carousel-item v-for="(item,index) in imgUrl" :key="index">
        <img :src="item.imgUrl" :title="item.title" :alt="item.description" @click="toBook(item)">
      </el-carousel-item>
      <!--      <el-carousel-item>-->
      <!--        <img src="@/assets/index_images/banner1.jpg" alt="">-->
      <!--      </el-carousel-item>-->
      <!--      <el-carousel-item>-->
      <!--        <img src="@/assets/index_images/banner2.jpg" alt="">-->
      <!--      </el-carousel-item>-->
      <!--      <el-carousel-item>-->
      <!--        <img src="@/assets/index_images/banner3.jpg" alt="">-->
      <!--      </el-carousel-item>-->
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      imgUrl: []
    }
  },
  created() {
    this.getRequest('/p/ims/swiper/list1').then((resp) => {
      this.imgUrl = resp.data
    })
  },
  methods: {
    toBook(item) {
      if (item.type === 1)
        this.$router.push({path: '/articleDetail', query: {id: item.aid}})
      else
        this.$router.push({path: '/purchasePage', query: {curBookId: item.bid}})
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  margin-bottom: 30px;
}

img {
  width: 60em;
  height: 300px;
}

::v-deep .el-carousel__item--card.is-in-stage{
  /*height: 400px;*/
}

.el-carousel__item--card {
  width: 60em;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

img {

}
</style>